<template>
  <div class="view-form">
    <div v-for="(item, index) in config.dataList" :key="index" class="item">
      <div :title="item.label" class="label">{{ item.label }}：</div>
      <div :title="value[item.key] | formatter(item)" class="value">{{ value[item.key] | formatter(item) }}</div>
    </div>
  </div>
</template>

<script>
// import component from "@/"
export default {
  name: 'ViewForm',
  components: {},
  filters: {
    // 表单显示过滤，将单选，下拉的值转换为文字
    formatter(cellValue, config) {
      if (config.type === 'select' || config.type === 'radio' || config.type === 'checkbox') {
        if (!Array.isArray(cellValue)) {
          cellValue = [cellValue]
        }
        const val = []
        config.options.filter(obj => cellValue.filter(val => val === obj.value).length > 0).forEach(obj => {
          val.push(obj.label)
        })
        return val.join(',')
      } else if (config.type === 'tree') {
        return this.treeVal(config.treeOptions, cellValue)
      } else {
        return cellValue
      }
    }
  },
  props: {
    config: {
      type: Object,
      default() {
        return {}
      }
    },
    value: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
    }
  },
  computed: {},

  created() {},

  mounted() {},

  activated() {},

  methods: {
    // 递归得出树形得值
    treeVal(ary, val, index = 0, label = []) {
      console.log(ary, index, val, label)
      const obj = ary.find(obj => obj.value === val[index])
      label.push(obj.label)
      if (index < val.length - 1) {
        return this.treeVal(obj.children, val, index + 1, label)
      } else {
        return label.join('/')
      }
    }

  }
}
</script>

<style lang='scss' scoped>
  .view-form{
    display: flex;
    // justify-content: space-between;
    .item{
      width: 25%;
      display: flex;
      line-height: 30px;
      box-sizing: border-box;
      .label{
        width: 40%;
        @include text-overflow();
        background-color: #f2f2f2;
        padding: 0 5px;
      }
      .value{
        width: 60%;
        padding: 0 5px;
        @include text-overflow();
        background-color: #ebebeb;
      }
    }
  }
</style>
